<template>
  <div class="login-warp">
    <div class="login-warp_title">
      <div class="login-warp_title-logo">
        <div class="login-warp_title-logo1" />
        <div class="login-warp_title-logo2" />
      </div>
    </div>
    <div class="input-warp">
      <div class="input-cont">
        <span>用户名</span>
        <van-field v-model="loginForm.username" clearable placeholder="请输入用户名" />
      </div>
      <div class="input-cont">
        <span>密码</span>
        <van-field v-model="loginForm.password" clearable placeholder="请输入密码" type="password" />
      </div>
      <div class="input-cont">
        <div class="verification__imageBox" @click="switchCodeHandler">
          <img class="imgBox_container" :src="switchCodeImg" alt="">
        </div>
        <span>验证码</span>
        <van-field v-model="loginForm.verificationCode" clearable placeholder="请输入验证码" type="password" />
      </div>
      <div class="login-btn">
        <van-button round type="primary" @click="handleLogin">{{ loginText }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant'
import { getRefData } from '@/api/common'
import getSelect from '@/assets/mixin/getSelect'

export default {
  name: 'Login',
  mixins: [getSelect],
  data() {
    return {
      targetList: [
        // { label: '全部', name: '全部' },
        { label: '安全生产', name: '安全', code: 'safety' },
        { label: '环保管理', name: '环保', code: 'environmental' },
        { label: '消防管理', name: '消防', code: 'fireFighting' },
        { label: '能源管理', name: '能源', code: 'energySources' },
        { label: '碳排放管理', name: '碳排放', code: 'carbonDischarge' }
      ],
      mobile: '',
      rember: false,
      switchCodeImg: '', // 验证码图片
      loginForm: {
        username: '',
        password: '',
        verificationCode: ''
      },
      loginText: '登 录'
    }
  },
  created() {
    this.$nextTick(() => {
      this.switchCodeHandler()
    })
  },
  mounted() {
    this.loginForm.password = process.env.NODE_ENV === 'development' ? 'Lvchuang@123' : ''
    this.loginForm.username = process.env.NODE_ENV === 'development' ? 'gly' : ''
  },
  methods: {
    /**
     * 切换显示验证码
     */
    async switchCodeHandler() {
      const info = {
        h: 45,
        V1: 4,
        w: 130
      }
      const randomNum = Math.floor(Math.random() * 10 + 1)
      this.switchCodeImg = `${process.env.VUE_APP_BASE_API}` + `/admin/user/createImageCode.do?h=${info.h}&V1=${info.V1}&w=${info.w}&random=${randomNum}`
    },
    handleLogin() {
      if (this.loginForm.username === '') {
        Notify({ type: 'warning', message: '请输入用户名称' })
        return
      }
      if (this.loginForm.password === '') {
        Notify({ type: 'warning', message: '请输入密码' })
        return
      }
      if (this.loginForm.code === '') {
        Notify({ type: 'warning', message: '请输入验证码' })
        return
      }
      this.loading = true
      this.loginText = '登录中...'
      this.$store.dispatch('user/login', this.loginForm)
        .then((res) => {
          this.$router.push({ path: this.redirect || '/special' })
          this.loading = false
          this.loginText = '已登录'
        })
        .catch(() => {
          this.loading = false
          this.loginText = '登录'
        })
    },
    async getSelectData() {
      const { status, data } = await getRefData()
      if (status === 0 && data) {
        const selectOptionAll = {}
        data.forEach((v) => {
          selectOptionAll[v.codeTypeName] = v.refDescVOList
            .filter((y) => {
              return y.codeName !== '全部'
            })
            .map((z) => {
              return {
                value: z.codeId,
                label: z.codeName,
                text: z.codeName
              }
            })
        })
        selectOptionAll['行业类别-fixed'] = selectOptionAll['集团业务系统-行业类别']
        localStorage.setItem('selectOptionAll', JSON.stringify(selectOptionAll))
      }
    }
  }
}
</script>
